<template>
  <div>
    <el-container>
      <el-header>
        <h2 style="display:inline;">{{formData.title}}</h2>
        <div style="padding-top:10px">
          <span :formatter="dataFormat" style="display:inline;">{{formatDate(formData.createTime)}}</span>
          <span style="padding-left:8px">超级管理员</span>
          <i class="el-icon-view" style="padding-left:8px"></i>
          <span style="padding-left:8px">{{formData.visits}}</span>
        </div>
      </el-header>
      <el-main class="Main" v-html="formData.articleBody"></el-main>
    </el-container>
  </div>
</template>

<script>
import moment from 'moment'
import { detail } from '@/api/hmmm/articles.js'
export default {
  props: ['value'],
  name: 'ArticlesPreview',
  data () {
    return {
      // 数据
      formData: {
        id: null,
        createTime: '',
        reads: '',
        articleBody: '',
        username: ''
      }
    }
  },
  created () {
    this.doPreview(this.value)
  },
  methods: {
    // 发送请求
    async doPreview (objeditId) {
      const { data: res } = await detail({ id: objeditId })
      this.formData = res
    },
    dataFormat (row, column) {
      var date = row[column.property]
      if (date) {
        return moment(date).format('YYYY-MM-DD HH:mm:ss')
      } else {
        return ''
      }
    },
    formatDate (date) {
      const d = new Date(date)
      const year = d.getFullYear()
      const month = (d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1)
      const day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate()
      const hours = d.getHours() < 10 ? '0' + d.getHours() : d.getHours()
      const min = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes()
      const sec = d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds()
      const time = year + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + sec
      return time
    }
  }
}
</script>

<style>
.Main {
  background-color: #f5f5f5;
}
</style>
